<template>
    <div class="user_page">
      <div class="flex user_head bg_f" @click="goUserInfo">
         <div class="ava_img">
           <img :src="userInfo.avatarUrl" alt="">
         </div>
         <div class="user_name">
           <p>昵称 : {{userInfo.nickName}}</p>
           <p class="comp">公司名称 : {{formData.name||'--'}}</p>
         </div>
      </div>
      <div>
        <div class="flex flex-between group_item bg_f" @click="goUserList">
           <div class="flex-align flex">
             <i class="icon_contact"></i>
             <span>联系人</span>
           </div>
           <div>
             <i class="address_right"></i>
           </div>
        </div>
      </div>
      <!-- <button @click="changeStatus">删除</button>
      <button @click="goDetail">用户详情</button> -->
    </div>
</template>

<script>
import card from "@/components/card";
import api from "@/utils/api";
export default {
  data() {
    return {
      userInfo: {},
      formData: {
        name:''
      }
    };
  },

  components: {
    card
  },
  async mounted() {
    let userInfo = wx.getStorageSync("userInfo");
    console.log("userInfo", userInfo);
    if (userInfo) {
      this.userInfo = JSON.parse(userInfo);
    } else {
      this.getUserInfo();
    }

    wx.setNavigationBarTitle({
      title: "个人中心"
    });
  },
  onShow(){
    this.getDetail()
  },
  methods: {
     getDetail() {
      api.customer
        .Detail()
        .then(res => {
          // 获取个人信息
          console.log("res客户信息", res);
          if (res && res.code == 0) {
            this.formData = { ...this.formData, ...res.data };
          } else {
            this.toastError(res.msg);
          }
        })
        .catch(err => {
          this.toastError("网络繁忙");
        });
    },
    goUserList(){
      this.$router.push("/pages/contact/main");
    },
    goUserInfo() {
      this.$router.push("/pages/user/info/main?type="+'edit');
    },
    getUserInfo() {
      // 调用登录接口
      wx.login({
        success: () => {
          wx.getUserInfo({
            success: res => {
              console.log("res", res);
              this.userInfo = res.userInfo;
            }
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 150px;
}

.form-control {
  display: block;
  padding: 0 12px;
  margin-bottom: 5px;
  border: 1px solid #ccc;
}

.counter {
  display: inline-block;
  margin: 10px auto;
  padding: 5px 10px;
  color: blue;
  border: 1px solid blue;
}
.ava_img,
.ava_img img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 1px solid #eee;
}
.ava_img img {
  width: 100%;
}
.ava_img {
  margin-right: 10px;
}
.user_head {
  align-items: center;
  padding: 20px 15px;
}
.user_name {
  font-size: 14px;
}
.comp {
  color: #999;
  margin-top: 5px;
}
.icon_contact{
  margin-right: 10px;
}
.group_item{
  padding: 15px;
  margin: 20px 0;
}
.user_page{
  background-color: #f8f8f8;
  height: 100vh;;
}
</style>
